<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单--axios--前后端交互</title>
	</head>
	<body>
		<!--2.1 定义div 管理表单-->
		<div id="app">
			<!--1. 准备表单-->
			<table id="tab1" align="center" width="50%" border="1px" bordercolor="#7fffd4">
				<tr>
					<td colspan="5">
						<h1 align="center">用 户 列 表</h1>
					</td>
				</tr>
				<tr>
					<th>编 号</th>
					<th>名 称</th>
					<th>年 龄</th>
					<th>性 别</th>
					<th>操 作</th>
				</tr>
				
				<!--3.3 遍历数据实现表单数据获取-->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button>修改</button>
						<button>删除</button>
					</td>
				</tr>
			
			</table>
		</div>
		
		<!--2. 引入Vue管理-->
		<!--四步: 1.定义div 2.引入JS类库 3.实例化vue对象 4.取值操作 {{}} -->
		<!--2.2 导入js函数类库-->
		<!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
		
		<script src="../js资源/vue.js"></script>
		<script src="../js资源/axios.js"></script>
		
		<!--2.3 实例化vue对象-->
		<script>

            <!--3. ajax请求数据入表-->
            //优化请求路径
            axios.defaults.baseURL = "http://localhost:8090"

            const app = new Vue({
                el: '#app',
                data: {
                    userList: []//3.2.2
                },
                methods: {
                    //3.2 定义远程获取数据的ajax请求
                    /**
                     * 解构赋值
                     *   想法:能否利用一个方法 就将数据直接获取.简化2步调用的
                     *   实现:ES7 提供了await async 简化现有axios操作
                     *   用法说明:
                     1. await 标识异步请求 解构操作
                     2. async 用在函数中.支持解构   要求同时出现
                     */
                    async getUserList() {
                        //3.2.1语法结构: 将ajax返回值data 赋值给result
                        let {data: result} = await axios.get("/findAll")
                        this.userList = result//3.2.2返回结果到表单
                    }
                },
                //3.1 钩子函数
                created() {
                    //触发函数调用
                    this.getUserList()
                }
            })
		</script>
	
	</body>
</html>